<template>
    <div class="material">
        <div class="box" v-loading="loading">
            <div :class="total!=0?'list-box':'middle-box'" >
                <div class="item" v-for="i in materialList" :key="i.id">
                    <div class="name">{{i.name}}</div>
                    <div class="down">
                        <el-button type="primary" round  size="small" @click="downLoad(i)">下载</el-button></div>
                </div>
                <el-empty description="暂无数据" v-if="total!==0" :image="require('@/assets/images/empty.png')"></el-empty>
            </div>
            <div class="pageBox">
                <div style="text-align: right;" class="page">
                    <el-pagination
                            hide-on-single-page
                            @current-change="currentChange"
                            :current-page="currentPage"
                            :page-size="pageSize"
                            layout=" prev, pager, next"
                            :total="total">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
  import { datasList } from '../../api/study'
  import { mapState } from 'vuex'

  export default {
    name: 'material',
    created () {
      // this.onLoad()
        let obj ={
            pageSize:this.pageSize,
            pageNum:this.currentPage,
            classId:this.$store.state.user.userInfo.classId,
            classOutlineId:-1,
        }
        datasList(obj).then(res=>{
            if (res.code === 200){
                this.loading =false
                // this.materialList = res.rows
                // this.total = res.total
                console.log("子组件的load信息",res)
            }
        })
    },
    computed:{
      ...mapState({
        current:state=>state.currentNode.id
      })
    },
    watch:{
      current(){
        this.onLoad()
      }
    },
    data(){
      return{
        loading:true,
        materialList:[
            {id:1,name:"测试1"},
            {id:2,name:"测试1"},
            {id:3,name:"测试1"},
        ],
        currentPage:1,
        pageSize:13,
        total:1,
      }
    },
    methods:{
      downLoad(data){
        this.$download.name(data.url)
      },
      onLoad(data){
        let obj ={
          pageSize:this.pageSize,
          pageNum:this.currentPage,
          classId:this.$store.state.user.userInfo.classId,
          classOutlineId:this.current,
          ...data
        }
        datasList(obj).then(res=>{
          if (res.code === 200){
            this.loading =false
            // this.materialList = res.rows
            // this.total = res.total
              console.log("子组件的load信息",res)
          }
        })
      },
      currentChange(val){
        this.currentPage = val
        this.onLoad()
      },
    }
  }
</script>

<style scoped lang="less">
    /*/deep/.el-tree--highlight-current,/deep/.el-tree-node.is-current > .el-tree-node__content{*/
    /*    background: red;*/
    /*}*/
    .material{
        .box{
            width: 770px;
            min-height: 680px;
            /*background: #ffffff;*/
            margin: 10px;
            >.list-box{
                padding-top: 13px;
                >.item{
                    display: flex;
                    justify-content: space-between;
                    width: 730px;
                    height: 42px;
                    /*background: #EEF5FB;*/
                    background: white;
                    margin:10px 20px;
                    >.name{
                        padding-left: 20px;
                        font-size: 14px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #333333;
                        line-height: 42px;
                    }
                    /deep/.el-button--small.is-round{
                        padding: 9px 30px;
                    }
                    >.down
                    {
                        padding:5px 20px 0 0;
                    }
                }
                >.item:hover{
                    cursor: pointer;
                }
            }
            >.middle-box {
                padding-top: 66px;
            }
        }
        .pageBox{
            width: 770px;
            height: 40px;
            margin-top: 20px;
            position: relative;
            .page{
                position: absolute;
                right: 20px;
                bottom: 10px;
                border: 1px solid #E8E8E8;
                width: auto;
            }
            ::v-deep.el-pagination{
                .el-pager{
                    .number{
                        color: #999999;
                    }
                    .active{
                        color: #39A5EF;
                    }
                    .more{
                        color: #999999;
                    }
                }
            }
        }
    }

</style>
